<template>
    <template v-for="menu of routes" :key="menu.path">
        <template v-if="menu.meta && menu.meta.menu_show">
            <template v-if="menu.meta.menu_type === menuTypes.PAGE || menu.meta.menu_type === menuTypes.SECOND_PAGE">
                <menu-item :key="menu.path" style="text-align: center;">
                    <template #icon>
                    </template>
                    <!-- <span class=" h-[62px] text-[16px] text-[#fff]"> -->
                    <span>
                        {{ menu.meta.title }}</span></menu-item>

            </template>
            <template v-else-if="menu.meta.menu_type === menuTypes.MENU || !menu.meta.menu_type">
                <sub-menu :key="menu.path">
                    <template #icon v-if="(menu.meta as any).normal || (menu.meta as any).hover">

                    </template>
                    <template #title>
                        <!-- <span class="inline-block h-[62px] text-[16px] text-[#fff] submenu-title"> {{ menu.meta.title || -->
                        <span> {{ menu.meta.title ||
                            '菜单' }}
                        </span>
                    </template>
                    <template v-if="menu.children && menu.children.length > 0">
                        <Menus :routes="menu.children" :select="select"></Menus>
                    </template>
                </sub-menu>
            </template>
        </template>
        <template v-else-if="menu.children && menu.children.length > 0">
            <Menus :routes="menu.children" :select="select"></Menus>
        </template>
    </template>
</template>
<script lang="ts" setup>
import { eMenuType } from '@/interface/enum';
import { RouteRecordRaw } from 'vue-router';
import Menus from './Menus.vue';
import { SubMenu, MenuItem } from "ant-design-vue"
const menuTypes = eMenuType;
defineProps<{ routes: Array<RouteRecordRaw>; select: string[] }>();
</script>
<style lang="less" scoped>
// .select {
//     display: inline-block;
// }

// .normal {
//     display: none;
// }

// .ant-menu-submenu.ant-menu-submenu-inline {
//     .ant-menu-submenu-title {
//         min-height: 60px !important;
//     }
// }

// .ant-layout-sider-children>.ant-menu {
//     background-color: #fff !important;

//     .ant-menu-title-content {
//         span {
//             color: #666666;
//         }
//     }
// }

// .ant-menu.ant-menu-horizontal {
//     height: 62px !important;

//     .ant-menu-submenu-title {
//         min-height: 60px !important;
//     }
// }

// .ant-menu-submenu.ant-menu-submenu-horizontal.ant-menu-submenu-open.ant-menu-submenu-selected>.ant-menu-submenu-title {

//     // box-shadow: 0px 0px 21px 0px rgba(97, 134, 222, 0.69);
//     // transition: all 0.2s linear;
//     .submenu-title {
//         color: #0079ff !important;
//         // color: #fff !important;
//     }
// }

// // 二级菜单样式
// .ant-menu.ant-menu-sub.ant-menu-vertical>.ant-menu-item.ant-menu-item-selected {
//     position: relative;

//     // span {
//     //   color: #0079ff !important;
//     // }

//     &::after {
//         // border-bottom: 4px solid #1890ff !important;
//         content: "";
//         height: 4px;
//         width: 100%;
//         background-color: #0079ff;
//         position: absolute;
//         bottom: 0;
//         left: 0;
//         right: 0;
//     }
// }


// .ant-menu-item-selected {
//     background-color: #2F3C4D22 !important;
//     height: 60px;

//     .ant-menu-title-content {
//         span {
//             color: #0079ff !important;
//         }
//     }

//     &::after {
//         border-bottom: 4px solid #1890ff !important;
//     }
// }

// // .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
// //   background-color: transparent !important;
// // }

// .ant-menu-vertical .ant-menu-item::after,
// .ant-menu-vertical-left .ant-menu-item::after,
// .ant-menu-vertical-right .ant-menu-item::after,
// .ant-menu-inline .ant-menu-item::after {
//     // border-right: 4px solid #1890ff;
//     // border-radius: 2px;
//     content: '';
//     width: 4px;
//     background-color: #1890ff;
//     border-radius: 2px;
//     height: 70px;
//     top: 50% !important;
//     transform: translateY(-50%) !important;
// }

// .ant-menu-horizontal:not(.ant-menu-dark)>.ant-menu-submenu-selected::after {
//     border-bottom: 4px solid #1890ff !important;
// }
</style>
  